<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/headCss.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/leftSidebar.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/framework/css/rightCon.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/framework/css/organTree.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/framework/css/popCss.css}" media="all">
</head>

<body class="layui-layout-body">
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="scroll-box">
        <div class="scroll-box-con">
            <div class="crumbs-nav f14px pb16px">
                <span class="current">组织架构</span>
                <!--<span class="current">党建活动记</span>
                <span>党建活动</span>
                <span>党建活动</span>-->
            </div>
            <div class="tree-organ pad16px border-radius4 bgWhite">
                <div class="new-data-btn mb16px lh30px overflow">
                    <p class="left"><span class="white border-radius4 bgBlue inline-block cursor" onclick="toAdd()"><img th:src="@{/static/framework/img/button_add.png}">新建组织</span></p>
                    <!--                    <p class="right"><span class="block">共<em class="red">120</em>条数据</span></p>-->
                </div>
                <div class="tree-organ-con border-radius4">
                    <ul class="tree-item-title fb">
                        <li><span>组织名称</span></li>
                        <li><span>备注</span></li>
                        <li><span>操作</span></li>
                    </ul>
                    <div class="tree-con-box">
                        <ul class="tree-one" th:each="orgList : ${orgLists}">
                            <li>
                                <div class="tree-children">
                                    <div>
                                        <p class="tree-arrow cursor"><img th:if=" ${not #lists.isEmpty(orgList.sysOrganizations)}" th:src="@{/static/framework/img/icon_down.png}"></p>
                                        <p>[[${orgList.name}]]</p>
                                    </div>
                                    <div>
                                        <p class="cursor tree-hide">[[${orgList.remark}]]</p>
                                        <div class="layui-tips-main hidden">
                                            <div>[[${orgList.remark}]]</div>
                                            <i class="layui-icon-close"></i>
                                        </div>
                                    </div>
                                    <div><span class="blue cursor" th:onclick="toUpdate([[${orgList.id}]]);">编辑</span>|<span th:if="${#lists.isEmpty(orgList.sysOrganizations)}" th:onclick="remove([[${orgList.id}]])" class="blue cursor">删除</span>
                                        <span th:unless="${#lists.isEmpty(orgList.sysOrganizations)}" class="gray cursor">删除</span></div>
                                </div>
                                <ul class="tree-two" th:if="${not #lists.isEmpty(orgList.sysOrganizations)}" th:each="twoOrgList : ${orgList.sysOrganizations}">
                                    <li>
                                        <div class="tree-children">
                                            <div>
                                                <p class="tree-arrow cursor"><img th:if=" ${not #lists.isEmpty(twoOrgList.sysOrganizations)}" th:src="@{/static/framework/img/icon_down.png}"></p>
                                                <p>[[${twoOrgList.name}]]</p>
                                            </div>
                                            <div>
                                                <p class="cursor tree-hide">[[${twoOrgList.remark}]]</p>
                                                <div class="layui-tips-main hidden">
                                                    <div>[[${twoOrgList.remark}]]</div>
                                                    <i class="layui-icon-close"></i>
                                                </div>
                                            </div>
                                            <div><span class="blue cursor" th:onclick="toUpdate([[${twoOrgList.id}]]);">编辑</span>|<span th:if="${#lists.isEmpty(twoOrgList.sysOrganizations)}" th:onclick="remove([[${twoOrgList.id}]])" class="blue cursor">删除</span>
                                                <span th:unless="${#lists.isEmpty(twoOrgList.sysOrganizations)}" class="gray cursor">删除</span></div>
                                        </div>
                                        <ul class="tree-three" th:if="${not #lists.isEmpty(twoOrgList.sysOrganizations)}" th:each="threeOrgList : ${twoOrgList.sysOrganizations}">
                                            <li>
                                                <div class="tree-children">
                                                    <div>
                                                        <p class="tree-arrow cursor"><img th:if=" ${not #lists.isEmpty(threeOrgList.sysOrganizations)}" th:src="@{/static/framework/img/icon_down.png}"></p>
                                                        <p>[[${threeOrgList.name}]]</p>
                                                    </div>
                                                    <div>
                                                        <p class="cursor tree-hide">[[${threeOrgList.remark}]]</p>
                                                        <div class="layui-tips-main hidden">
                                                            <div>[[${threeOrgList.remark}]]</div>
                                                            <i class="layui-icon-close"></i>
                                                        </div>
                                                    </div>
                                                    <div><span class="blue cursor" th:onclick="toUpdate([[${threeOrgList.id}]]);">编辑</span>|<span th:if="${#lists.isEmpty(threeOrgList.sysOrganizations)}" th:onclick="remove([[${threeOrgList.id}]])" class="blue cursor">删除</span>
                                                        <span th:unless="${#lists.isEmpty(threeOrgList.sysOrganizations)}" class="gray cursor">删除</span></div>
                                                </div>
                                                <ul class="tree-four" th:if="${not #lists.isEmpty(threeOrgList.sysOrganizations)}" th:each="fourOrgList : ${threeOrgList.sysOrganizations}">
                                                    <li>
                                                        <div class="tree-children">
                                                            <div>
                                                                <p class="tree-arrow cursor"><img th:if=" ${not #lists.isEmpty(fourOrgList.sysOrganizations)}" th:src="@{/static/framework/img/icon_down.png}"></p>
                                                                <p>[[${fourOrgList.name}]]</p>
                                                            </div>
                                                            <div>
                                                                <p class="cursor tree-hide">[[${fourOrgList.remark}]]</p>
                                                                <div class="layui-tips-main hidden">
                                                                    <div>[[${fourOrgList.remark}]]</div>
                                                                    <i class="layui-icon-close"></i>
                                                                </div>
                                                            </div>
                                                            <div><span class="blue cursor" th:onclick="toUpdate([[${fourOrgList.id}]]);">编辑</span>|<span th:if="${#lists.isEmpty(fourOrgList.sysOrganizations)}" th:onclick="remove([[${fourOrgList.id}]])" class="blue cursor">删除</span>
                                                                <span th:unless="${#lists.isEmpty(fourOrgList.sysOrganizations)}" class="gray cursor">删除</span></div>
                                                        </div>
                                                        <ul class="tree-five" th:if="${not #lists.isEmpty(fourOrgList.sysOrganizations)}" th:each="fiveOrgList : ${fourOrgList.sysOrganizations}">
                                                            <li>
                                                                <div class="tree-children">
                                                                    <div>
                                                                        <p>[[${fiveOrgList.name}]]</p>
                                                                    </div>
                                                                    <div>
                                                                        <p class="cursor tree-hide">[[${fiveOrgList.remark}]]</p>
                                                                    </div>
                                                                    <div><span class="blue cursor" th:onclick="toUpdate([[${fiveOrgList.id}]]);">编辑</span>|<span th:if="${#lists.isEmpty(fiveOrgList.sysOrganizations)}" th:onclick="remove([[${fiveOrgList.id}]])" class="blue cursor">删除</span>
                                                                        <span th:unless="${#lists.isEmpty(fiveOrgList.sysOrganizations)}" class="gray cursor">删除</span></div>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="pop-con" style="display: none">
    <div class="pop-up">
        <!-- 删除 -->
        <div class="delete-con">
            <p class="bgBlue lh40px f16px white" style="padding-left: 32px;">提示</p>
            <input type="hidden" id="orgId">
            <div>
                <div><img th:src="@{/static/framework/img/icon_hint_delete.png}">您确定要删除这条数据吗？</div>
            </div>
            <div class="btn-con btn-con-margin textRight lh30px">
                <span class="btn-compile" onclick="submit()">确&nbsp;定</span>
                <span class="btn-cancel pop-close">取&nbsp;消</span>
            </div>
        </div>
    </div>
</div>

<div id="pop-con2" style="display: none">
    <div class="pop-up">
        <!-- 删除失败 -->
        <div class="delete-con">
            <p class="bgBlue lh40px f16px white" style="padding-left: 32px;">提示</p>
            <div>
                <div><img src="img/icon_hint.png" th:src="@{/static/framework/img/icon_hint.png}">此组织下有用户数据，不能删除！</div>
            </div>
            <div class="btn-con btn-con-margin textRight lh30px">
                <span class="btn-compile pop-close">确&nbsp;定</span>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/js/jquery-3.1.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/leftSidebar.js}" charset="utf-8"></script>
<script th:src="@{/static/framework/js/treeOne.js}" charset="utf-8"></script>
<script th:inline="javascript">

    var basePath = [[${#request.getContextPath()}]];

    $(function () {


    });


    function layerOne() {
        layui.use(['element', 'layer'], function () {
            var element = layui.element;
            var layer = layui.layer;
            layer.open({
                type: 1
                , title: false
                , closeBtn: false
                //新建组织
                , area: ['', '']
                , shade: 0.2
                , id: 'payCons'
                , btnAlign: 'c'
                , moveType: 1
                , shadeClose: true
                , content: $("div#pop-con").html(),
                success: function () {
                    //关闭弹层
                    $(".pop-close").click(function () {
                        layer.closeAll();
                    });
                },
            });
        });
    }


    function layerTwo() {
        layui.use(['element', 'layer'], function () {
            var element = layui.element;
            var layer = layui.layer;
            layer.open({
                type: 1
                , title: false
                , closeBtn: false
                //新建组织
                , area: ['', '']
                , shade: 0.2
                , id: 'payCons'
                , btnAlign: 'c'
                , moveType: 1
                , shadeClose: true
                , content: $("div#pop-con2").html(),
                success: function () {
                    //关闭弹层
                    $(".pop-close").click(function () {
                        layer.closeAll();
                    });
                },
            });
        });
    }

    //function layerTwo(){

    //}


    function toAdd() {
        window.location.href = "../organization/toOrgAddPage";
    }

    function toUpdate(id) {
        window.location.href = "../organization/toOrgUpdatePage?orgId=" + id;
    }

    function submit() {

        layui.use(['element', 'layer'], function () {
            var element = layui.element;
            var layer = layui.layer;
            var id = $("#orgId").val();
            var data = {nodeId: id}
            $.ajax({
                url: "../organization/deleteById",
                type: "delete",
                async: false,
                dataType: "json",
                data: data,
                success: function (result) {
                    var layer = layui.layer;
                    if (result.code == 200) {
                        layer.msg('数据已删除', {time: 1500, area: ['150px', '']}, function () {
                            layer.closeAll();
                            window.location.href = "../organization/toSysOrganizationPage";
                        });
                    } else if (result.code == 9002) {
                        layerTwo();
                    } else {
                        layer.msg(result.msg)
                    }
                }
            })
        })

    }

    function remove(id) {
        $("#orgId").val(id);
        layerOne()
    }

</script>
</body>

</html>
